<!--搜索列表-->
<template>
    <div class="page_goodsSearchList">
        <headerT title="搜索商品" :isShowBack="false"/>
        <div class=" pagesMain" style="height: 90vh;overflow-y: auto;">
            <div class="searchBlock">
                <input type="text" v-model="goods_name" class="inputBlock" placeholder="请输入关键字进行搜索"
                       @focus="isShowIcon = false"
                       @blur="setBlur"/>
                <img src="../../../static/images/search.png" v-show="isShowIcon" class="iconSearch" alt=""/>
                <div class="btn btnSearch translateBlock" @click="getList()">搜索</div>
                <div class="goodsLists">
                    <div v-if="!goodsLists.length" class="noData"></div>
                    <div class="everyBlockBgcolor everyBlockPadding list"
                         v-for="(item,index) in goodsLists" :key="index"
                         @click="$tools.goPage_query('goodsDetails',{goods_id:item.id})">
                        <div class="list_img" v-if="item.good_img.length!=0">
                            <img :src="item.good_img[0].img_url"/>
                            <div class="hot">热卖</div>
                        </div>

                        <div class="list_title">
                            <div class="goodsTitle moreTextEllipsis">
                                <span>{{item.goods_name}}</span>
                            </div>
                            <div class="goodsPrice">
                                <span class="goodsNewPrice">
                                    {{item.good_marketing!=null&&item.good_marketing.pattern!=1?'￥'+item.good_marketing.promotion_price:(item.good_specification.length!=0?'￥'+item.good_specification[0].price:'')}}
                                </span>
                                <span class="goodsOldPrice">
                                    {{item.good_marketing!=null&&item.good_specification.length!=0?'￥'+item.good_specification[0].price:''}}
                                </span>
                            </div>
                            <img src="../../../static/images/sale.png" class="yiSale"
                                 v-if="item.good_specification.length!=0&&item.good_specification[0].inventory==0"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <tabcard></tabcard>
    </div>
</template>

<script>
    import {Search} from 'vux'
    import {goodsList} from '../../services/goods'
    import tabcard from '@/components/tabCard'

    export default {
        name: "goodsSearchList",
        components: {
            Search,
            tabcard,
        },
        data() {
            return {
                results: [],
                goods_name: '',
                isShowIcon: false,
                goodsLists: [],
                page: 1,
                pageSize: 5,
                totalPage: 0, //总页数
                longitude: this.$tools.getStorageParam('localStorage', 'longitude'),
                dimensionality: this.$tools.getStorageParam('localStorage', 'dimensionality'),
            }
        },

        mounted() {
            window.addEventListener("scroll", this.handleScroll);
        },
        watch: {
            value(val) {
                this.isShowIcon = val ? false : true;
            },
        },
        methods: {
            setBlur() {
                this.isShowIcon = this.value ? false : true;
            },

            // 获取商品列表
            getList() {
                this.$vux.loading.show({
                    text: "Loading"
                });
                let param = {
                    longitude: this.longitude,
                    dimensionality: this.dimensionality,
                    goods_name: this.goods_name,
                    page: this.page,
                    pageSize: this.pageSize,
                }
                this.$post(goodsList, param).then(res => {
                    this.$vux.loading.hide();
                    if (this.page === 1) {
                        this.goodsLists = res.data.data;
                        this.totalPage = res.data.last_page;
                    } else {
                        this.goodsLists = [...this.goodsLists, ...res.data.data];
                    }
                }).catch(error => {
                    this.$vux.loading.hide();
                });
            },

            //分页加载数据
            handleScroll() {
                if (document.documentElement.scrollTop + window.innerHeight >= document.body.offsetHeight) {
                    if (this.page > this.totalPage || this.page === this.totalPage) {
                        return;
                    } else {
                        this.page = this.page + 1;
                        this.getList();
                    }
                }
            },

        },
    };
</script>

<style lang="less" rel="stylesheet/less" type="text/less">
    .page_goodsSearchList {
        .pagesMain {
            /*padding-bottom: 1.6rem;*/
        }

        .searchBlock {
            width: fit-content;
            margin: 1.8rem auto .5rem auto;

            .inputBlock {
                width: 6.5rem;
                height: 1rem;
                line-height: 1rem;
                border: 1px solid #FF8F58;
                border-radius: 18px;
                font-size: .39rem;
                padding-left: 16px;
            }

            .iconSearch {
                position: absolute;
                left: 1rem;
                top: .8rem;
                width: .5rem;
            }

            .btnSearch {
                width: 2rem;
                vertical-align: bottom;
            }

            .goodsLists {
                margin-top: .5rem;
            }

            .list {
                box-sizing: border-box;
                height: 3.18rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #e6e6e6;
            }

            .list_img {
                width: 2.88rem;
                height: 2.44rem;
                text-align: center;
                position: relative;
            }

            .list_img img {
                width: 2.88rem;
                height: 2.44rem;
                display: block;
            }

            .hot {
                width: 2.88rem;
                height: 0.49rem;
                background: rgba(13, 13, 13, 0.23);
                line-height: 0.49rem;
                border-radius: 0.08rem;
                font-size: 0.25rem;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                text-align: center;
                position: absolute;
                bottom: 0rem;
                font-weight: 400;
            }

            .list_title {
                margin-left: 0.3rem;
                width: calc(100% - 3.26rem);
                height: 1.98rem;
                position: relative;
            }

            .isTag {
                background: #f64135;
                color: #ffffff;
                font-size: 0.2rem;
                padding: 0.06rem 0.12rem;
                border-radius: 0.08rem;
            }

            .goodsTitle {
                height: 1.05rem;
                color: #4e4e4e;
                font-size: 0.34rem;
                -webkit-line-clamp: 2;
            }

            .goodsPrice {
                margin-top: 0.45rem;
                line-height: 1.05rem;
            }

            .goodsNewPrice {
                color: #f64135;
                font-size: 0.44rem;
                font-weight: bold;
            }

            .goodsOldPrice {
                color: #9f9f9f;
                font-size: 0.25rem;
                text-decoration: line-through;
                margin-left: 0.12rem;
                font-weight: 400;
            }

            .list_title .yiSale {
                position: absolute;
                width: 1.77rem;
                height: 1.65rem;
                bottom: -0.2rem;
                right: 0.08rem;
            }
        }
    }
</style>
